<template>
  <div>
    <van-nav-bar
  title="商品搜索"
  left-text="返回"
  left-arrow
  @click-left="onClickLeft"
/>
  <van-empty image="search" description="未搜索到该商品" v-if="data.length==0"/>

   <van-card v-for="item in data" :key="item.did" v-else
  :price="item.price.toFixed(2)"
  :desc="item.article"
  :title="item.title"
  :thumb="`/downloadFile/${item.img}`"
>
  <template #footer>
    <van-button size="mini" @click='goproduct'>查看详情</van-button>
  </template>
  </van-card>
  
 


  </div>
</template>

<script>
  export default {
    data() {
      return {
       kw: '',
       data:[],
      }
    },
    mounted () {
      let kw=this.$route.params.kw
      console.log(kw);
      this.goProducts(kw)
    },
    methods: {
      goProducts(kw) {
      this.axios.get("/search?items=" + kw).then((res) => {
        console.log("商品列表", res);
        this.data=res.data.data
        console.log(this.data);
      });
    }, 
     onClickLeft() {
      this.$router.go(-1)
    },
    goproduct() {
      this.$router.push('/product')
    },
  }
  }
</script>

<style>
.van-nav-bar__text{
  color: black;
}
.van-icon.van-icon-arrow-left.van-nav-bar__arrowt{
  color: black;
}
.van-card__title.van-multi-ellipsis--l2{
    margin-top:5px;
     font-size: 15px;
     font-weight: 700;
}
.van-card__desc.van-ellipsis{
  margin-top: 10px;
  font-size: 13px;
}
.van-card__price-integer{
  font-size: 20px;
  font-weight: 700;
}
</style>